<template>
  <div id="app">
    <router-view></router-view>
    <mt-popup
      class="download_mt"
      v-model="$root.downloadPage"
      popup-transition="popup-fade"
      position="bottom"
    >
      <slot>
        <p class="share-ios-back" v-if="$root.ISIOS" @click.stop.prevent="$root.hideDownload"></p>
        <p class="share-android-back" v-if="!$root.ISIOS" @click.stop.prevent="$root.hideDownload"></p>
      </slot>
    </mt-popup>
  </div>
</template>
<script>
// const doc = window.document
// const evt = doc.createEvent('Event')
// evt.initEvent('touchmove', true, true)
// var reporting = false
import { mapGetters } from "vuex";
import { TabBar } from "./utils/enum";
import { getUrlParam } from "./common/util";

import { LoginAuto } from "./common/api/user";

const wss = window.sessionStorage;
const TabSSKEY = "MEMBER_FIRST_TAB";

export default {
  name: "app",
  computed: {
    ...mapGetters({ baseValue: "baseValue", user: "userInfo" })
  },
  beforeCreate() {
    let _ = this,
      queryParam = getUrlParam("param");

    _.$store.dispatch("setBaseValue");

    // APP进入时先清空登录态再重新通过链接参数自动登录, 防止更换账号未同步更换
    if (_.$root.ISAPP) {
      // 链接参数登录处理
      if (queryParam) {
        try {
          let param = JSON.parse(decodeURIComponent(queryParam)),
            user = _.user || {};

          if (param.token && (!user.token || user.token != param.token)) {
            _.$store.dispatch("setUserInfo", {});

            LoginAuto(param)
              .then(res => {
                _.$store.dispatch("setUserInfo", res);
              })
              .catch(e => {
                console.error("链接参数自动登录异常: ", e);
              });
          }
        } catch (e) {
          console.error("deal url query param error: ", e);
        }
      }
    }
  },
  // mounted() {
  //   this.$nextTick(() => {
  //     let launching = window.document.querySelector("i.launching");
  //     if (launching) launching.remove();
  //   });
  // },
  // updated() {
  //   if (!reporting) {
  //     reporting = true
  //     this.$nextTick(() => {
  //       reporting = false
  //       console.log('%cupdated nextTick', 'color:red;font-size:20px;')
  //     })
  //   }
  // },
  watch: {
    $route() {
      let _ = this,
        { meta } = _.$route;

      _.setToolBar({
        title: meta.title || "斗牛，Let’s DoNew！",
        bgcolor: meta.bgcolor || "#ffffff",
        textcolor: meta.textcolor || "#333333",
        showshoppingcarticon: !!meta.showshoppingcarticon
      });

      _.initShare();
      // console.log("%cwatch $route", "color:yellowgreen;font-size:18px;");
      _.$nextTick(() => {
        window.scrollTo(0, 1);
        window.scrollTo(0, 0);
        // doc.querySelector('body').dispatchEvent(evt)
      });
    },
    baseValue(val, old) {
      if (val && val.configs) {
        let tabed = wss.getItem(TabSSKEY);
        if (!tabed) {
          wss.setItem(TabSSKEY, "1");
          let { targettabindex } = val.configs;
          if (!isNaN(targettabindex)) {
            let path = "";
            switch (Number(targettabindex)) {
              case TabBar.user:
                path = "/user/home";
                break;
            }
            path && this.$router.replace(path);
          }
        }
      }
    }
  }
};
</script>
<!--<style src='mint-ui/lib/style.css'></style>-->
<style src='./assets/css/app.css'></style>
<style src='./assets/css/reset-ui.css'></style>
<style src='./assets/css/brand.css'></style>
<style src='./assets/css/page-group.css'></style>
<!--<style lang="scss" src='./assets/css/page-group.scss'></style>-->
